<template>
  <div class="home">
    <div class="header">
      <router-link to="/home/map" class="position" tag="div">{{city?city:address.city}}</router-link>
      <router-link class="h-search" tag="div" to="/home/search">
        <van-icon name="search" />搜索商品
      </router-link>
    </div>

    <div class="swiper">
      <van-swipe :autoplay="3000" class="r-swiper">
        <van-swipe-item v-for="image in homeInfo.banner" :key="image.id">
          <img :src="image.image_url">
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="channel">
      <router-link :to="`/category/categoryList?id=${item.id}`" class="cha-item" tag="div" v-for="item in homeInfo.channel" :key="item.id" >
        <img :src="item.icon_url" class="cha-icon">
        <p class="cha-title">{{item.name}}</p>
      </router-link>
    </div>

    <div class="brand">
      <router-link to="/home/brandlist" class="brand-title" tag="div">品牌制造商直供</router-link >
      <div class="brand-cont">
        <router-link tag="div" class="brand-item" :to="`/home/brandlist/brand?id=${item.id}`" v-for="item in homeInfo.brandList" :key="item.id">
          <img :src="item.new_pic_url">
          <div class="brand-para">
            <div class="brand-name">{{item.name}}</div>
            <div class="brand-price">{{item.floor_price}} 元起</div>
          </div>
        </router-link >
      </div>
    </div>

    <router-link to="/home/hotnew?isNew=1" tag="div" class="new-goods">
      <div class="ng-title">新品首发</div>
      <div class="ng-box">查看全部</div>
    </router-link >

    <div class="ng-list">
      <ul>
        <li class="item" v-for="item in homeInfo.newGoods" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p>{{item.name}}</p>
          <p>{{item.goods_brief}}</p>
          <p>￥ {{item.retail_price}}</p>
        </li>
      </ul>
    </div>

    <router-link to="/home/hotnew?isHot=1" tag="div" class="hot-goods">
      <div class="ht-title">人气推荐·好物精选</div>
      <div class="ht-box">查看全部</div>
    </router-link >

    <div class="ng-list">
      <ul>
        <li class="item" v-for="item in homeInfo.hotGoods" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p>{{item.name}}</p>
          <p>{{item.goods_brief}}</p>
          <p>￥ {{item.retail_price}}</p>
        </li>
      </ul>
    </div>

    <div class="topic">
      <div class="topic-title">专题精选 <img src="@/images/right.png"></div>
      <ul>
        <router-link tag="li" :to="`/topic/topicdetail?id=${item.id}`" class="topic-item" v-for="item in homeInfo.topicList" :key="item.id">
          <img :src="item.item_pic_url">
          <div class="item-title">{{item.title}}
            <span>{{item.price_info}} 元起</span>
          </div>
          <p>{{item.subtitle}}</p>
        </router-link>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList">
      <div class="list-title">居家好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[0].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">居家好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList" >
      <div class="list-title">餐厨好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[1].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">餐厨好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList" >
      <div class="list-title">饮食好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[2].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">饮食好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList" >
      <div class="list-title">配件好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[3].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">配件好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList" >
      <div class="list-title">服装好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[4].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">服装好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList" >
      <div class="list-title">婴童好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[5].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">婴童好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList" >
      <div class="list-title">杂货好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[6].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">杂货好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList" >
      <div class="list-title">洗护好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[7].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">洗护好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>

    <div class="list-show"  v-if="homeInfo.newCategoryList" >
      <div class="list-title">志趣好物</div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in homeInfo.newCategoryList[8].goodsList" :key="item.id" @click="toGoodDetail(item.id)">
          <img :src="item.list_pic_url">
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="list-item more">
          <div class="more-name">志趣好物</div>
          <img src="@/images/icon_go_more.png" class="more-icon">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { homeIndex } from "@/api/home";
export default {
  data() {
    return {
      address: "",
      homeInfo: "",
    };
  },
  mounted() {
    var that = this;
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          that.address = r.address;
          that.addressInfo(r);
        } else {
          alert("failed" + this.getStatus());
        }
      },
      { enableHighAccuracy: true }
    );
  },
  created() {
    homeIndex().then((res) => {
      this.homeInfo = res;
    });
  },
  methods: {
    toGoodDetail(val){
      this.$router.push({path:"/goods",query:{id:val}});
    },
    ...mapMutations(["addressInfo"]),
  },
  computed: {
    ...mapState(["city"]),
  },
};
</script>

<style lang="scss" scoped>
.home{
  background-color: rgb(244, 244, 244);
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 36px;
}

.header {
  width: 375px;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  z-index: 999;
  .position {
    width: 60px;
    height: 35px;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
    margin-right: 5px;
  }
  .h-search {
    width: 270px;
    height: 32px;
    border-radius: 13px;
    line-height: 32px;
    font-size: 14px;
    text-indent: 2px;
    color: rgb(210, 210, 210);
    background-color: rgb(210, 210, 210, 0.1);
  }
}

.swiper{
  width: 375px;
  height: 200px;
  margin-top: 45px;
  img{
    width: 375px;
    height: 200px;
  }
}

.channel{
  width: 375px;
  height: 90px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  margin-bottom: 8px;
  .cha-item{
    width: 35px;
    height: 60px;
    margin-top: 8px;
    .cha-icon{
      width: 30px;
      height: 30px;
      margin-left: 2.5px;;
    }
    .cha-title{
      line-height: 12px;
      text-align: center;
      font-size: 12px;
      margin-top: 16px;
    }
  }
}

.brand{
  width: 375px;
  background-color: #fff;
  padding-top: 20px;
  .brand-title{
    width: 375px;
    height: 12px;
    margin-bottom: 20px;
    line-height: 12px;
    text-align: center;
  }
  .brand-cont{
    width: 363px;
    height: 240px;
    margin: 0 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    .brand-item{
      position: relative;
      width: 178px;
      height: 116px;
      margin-bottom: 4px;
      img{        
        width: 176px;
        height: 116px;
      }
      .brand-para{
        position: absolute;
        top: 0;
        left: 0;
        width: 176px;
        height: 60px;
        z-index: 9;
        div{
          line-height: 12px;
          font-size: 12px;
          margin-top: 20px;
          text-indent: 8px;
        }
      }
    }
  }
}

.new-goods{
  width: 375px;
  height: 100px;
  background-color: rgb(241,247,253);
  padding-top: 40px;
  margin-bottom: 8px;
  .ng-title{
    width: 375px;
    height: 20px;
    text-align: center;
    font-size: 20px;
    color: rgb(140,155,174);
  }
  .ng-box{
    width: 90px;
    height: 24px;
    margin: 30px auto;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: rgb(140,155,174);
    background-color: rgb(216,228,240);
  }
}

.ng-list{
  width: 375px;
  ul{
    width: 375px;
    height: 244px;
    margin-bottom: 8px;
    display: flex;
    overflow-x: scroll;
    .item{
      width: 160px;
      padding: 0 10px;
      margin-right: 1px;
      background-color: #fff;
      img{
        width: 140px;
        height: 140px;
      }
      p{
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 16px;
      }
      :nth-child(2){
        margin-top: 0px;
        font-size: 15px;
        font-weight: 600;
      }
      :nth-child(3){
        color: rgb(167,148,185);
      }
      :last-child{
        color: rgb(165,50,50);
      }
    }
  }
}

.hot-goods{
  width: 375px;
  height: 100px;
  background-color: rgb(254,247,227);
  padding-top: 40px;
  margin-bottom: 8px;
  .ht-title{
    width: 375px;
    height: 20px;
    text-align: center;
    font-size: 20px;
    color: rgb(180,165,125);
  }
  .ht-box{
    width: 90px;
    height: 24px;
    margin: 30px auto;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: rgb(180,165,125);
    background-color: rgb(244,233,203);
  }
}

.topic{
  width: 375px;
  height: 300px;
  background-color: #fff;
  margin-bottom: 8px;
  .topic-title{
    width: 375px;
    height: 52px;
    padding: 18px;
    line-height: 12px;
    text-align: center;
    box-sizing: border-box;
    img{
      width: 16px;
      height: 16px;
      margin-bottom: -4px;
    }
  }
  ul{
    width: 375px;
    display: flex;
    overflow-x: auto;
    li{ 
      width: 287px;
      height: 250px;
      margin-left: 10px;
      img{
        display: block;
        width: 287px;
        height: 163px;
        border-radius: 5px;
      }
      .item-title{
        width: 287px;
        padding-top: 4px;
        font-size: 15px;
        line-height: 16px;
        font-weight: 800;
        margin-bottom: 16px;
        span{
          float: right;
          font-size: 12px;
          color: rgb(165,50,50);
        }
      }
      p{
        width: 245px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgb(138,138,138);
      }
    }
    :last-child{
      padding-right: 10px;
    }
  }
}

.list-show{
  width: 375px;
  padding-top: 15px;
  margin-bottom: 8px;
  .list-title{
    width: 375px;
    height: 27px;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
  }
  .list-cont{
    width: 375px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .list-item{
      width: 180px;
      height: 220px;
      padding: 0 15px;
      margin-bottom: 5px;
      background-color: #fff;
      box-sizing: border-box;
      img{
        width: 150px;
        height: 150px;
      }
      .item-name{
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 10px;
        font-size: 12px;
      }
      .item-price{
        width: 150px;
        color: rgb(165,50,50);
        font-size: 12px;
      }
    }
    .more{
      .more-name{
        margin: 35px 0;
        font-size: 16px;
        text-align: center;
      }
      .more-icon{
        display: block;
        width: 35px;
        height: 35px;
        margin: 0 auto;
      }
    }
  }
}

// *{
//   border: 1px solid red;
// }

::-webkit-scrollbar{
    display: none
}
</style>